Atomic Design 五大階段：原子 ( Atom ) -> 分子 ( Molecules ) -> 組織 ( Organisms ) -> 模板 ( Templates ) -> 頁面 ( Pages )

本篇重點

• 響應式排版 ( RWD )
• 中斷點 ( Breakpoint )
• 響應式網頁的網格
• 響應式網格系統的設定

響應式排版 ( RWD )

響應式網頁設計 ( Responsive Web Design ) 可以讓網站根據不同裝置的螢幕解析度，去做適合的介面呈現，減少使用者進行縮放、平移和捲動等操作，達到更好的使用者體驗。

中斷點 ( Breakpoint )

中斷點是改變排版的解析度寬度，可以透過 Statecounter 找出常用的尺寸當作中斷點，建議選擇手機、平板、桌機三種尺寸做設計。

中斷點的選擇

• 常用裝置尺寸
• 常用框架規範 ( Bootstrap )

Statecounter 常用裝置尺寸：

2019 年台灣前三常用的裝置尺寸

• 1920 X 1080
• 414 X 896
• 1536 X 864

響應式網頁的網格

• 固定網格 ( Fixed Grid )
• 流動網格 ( Fluid Grid )

固定網格 ( Fixed Grid )

固定網格要到中斷點時才會變更排版，中斷點之間的尺寸會維持該級距的網格，圖片文字不會在尺寸縮放時跟著變化，只會縮短欄外間距。

流動網格 ( Fluid Grid )

流動網格在裝置尺寸縮放時，網頁文字、圖片等元素會跟著動態縮放，直到經過中斷點時才會更動網格系統，因此介面上的元件寬度通常都是比例，而不是固定數值。

響應式網格系統的設定

根據專案開發，選擇最適合的方式

• 固定欄寬與欄間距，只調整欄數與欄外間距
• 固定欄數與欄間距，只調整欄外間距 ( 最常見像 Bootstrap )
• 根據尺寸調整欄數，以及相對應的欄間距 ( 像 Material Design 分很細 )

好! 下一篇我們繼續討論模板的相關事項 : )